<template>
  <!-- 采购单详情表 -->
  <div>
    <!--信息单 -->
    <div>
      <el-row>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item
            index="1"
            style="font-size: 20px; font: blod; color: black"
            >采购单详情</el-menu-item
          >
          <span class="but">
            <el-button plain icon="el-icon-s-order"  @click="split()">拆单</el-button>
            <el-button plain icon="el-icon-s-order" @click="unAudit()">反审</el-button>
            <el-button plain icon="el-icon-s-order" @click="audit()">审核</el-button>
            <el-button
              type="primary"
              icon="el-icon-top-left"
              @click="backtrack()"
              >返回</el-button
            >
          </span>
        </el-menu>
        <span>
          <font style="font-size: 15px; margin-left: 20px">基本信息</font>
        </span>
      </el-row>

      <el-form
        :inline="true"
        :model="formLabelAlign"
        label-position="left"
        label-width="90px"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item label="产品线:">
              <el-input v-model="formLabelAlign.productLine" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="客户：">
              <el-input v-model="formLabelAlign.customer" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item label="仓库：">
              <el-input v-model="formLabelAlign.warehouse" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="制单人：">
              <el-input v-model="formLabelAlign.makPeople" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item label="审核人：">
              <el-input v-model="formLabelAlign.audit" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="成色：">
              <el-input v-model="formLabelAlign.condition" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="制单时间：">
              <el-input v-model="formLabelAlign.createdTime" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-table-column
              label="状态"
              align="center"
              width="150"
              prop="status"
            >
            </el-table-column>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="单号：">
              <el-input v-model="formLabelAlign.orderNo" disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item label="状态：">
              <el-input
                v-model="formLabelAlign.purchaseOrderStatus"
                disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="purchaseOrderGoodsId" label="产品id" width="120">
        </el-table-column>
        <el-table-column prop="goodsCode" label="产品编码" width="120">
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="产品名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="supplier"
          label="供应商"
          width="200"
          align="center"
        />
        <el-table-column label="克重范围" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.weightStart" :disabled="true" style="width: 50px" />
            ~
            <el-input v-model="scope.row.weightEnd" :disabled="true" style="width: 50px" />
          </template>
        </el-table-column>
        <el-table-column
          prop="purWeight"
          label="重量"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="purNums" label="数量" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="craft"
          label="克效果工艺"
          width="100"
          align="center"
        />
        <el-table-column
          prop="specification"
          label="规格"
          width="100"
          align="center"
        />
      </el-table>
        

      <!-- 分页 -->
      <el-pagination
        :current-page="1"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        :total="80"
        style="float: right"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import purchaseOrderGoods from "@/api/needManager/PurchaseOrderGoods";
export default {
  data() {
    return {
      value: "",
      formLabelAlign: {},
      tableData: [],
      // 需求单对象
      requisitionForm: {
        // 基本信息对象
        basicInfo: {},
        // 产品信息对象
        goodsInfo: {},
        pageNum: 1,
        pageSize: 10,
      },
      //采购单id
      purchaseOrderId: null,
      //拆的对象
      splitGoodsIds: {
        purchaseOrderId: null,
        purchaseOrderGoodsIds: [],
      },
      //封装搜索条件
      queryPageBean: {
        currentPage: 1,
        pageSize: 10,
        queryString: "",
        startDate: "",
        endDate: "",
      },
      selection: [],
    };
  },
  created() {
    //获取需求单基本信息
    this.getData();
    //分页查询需求单对应商品信息
    this.getGoods();
  },
  methods: {
    getData() {
      let x = this.$route.query.purchaseOrderId;
      this.purchaseOrderId = x;
      purchaseOrderGoods.getPurchaseOrderGoodsEditData(x).then((res) => {
        this.formLabelAlign = res.data;
        //将产品线状态转为对应的状态
        this.formLabelAlign.productLine =
          this.formLabelAlign.productLine == 1 ? "A产品线" : 
          this.formLabelAlign.productLine == 2? "B产品线":
          this.formLabelAlign.productLine == 3? "C产品线":
          this.formLabelAlign.productLine == 4? "D产品线":''
        //将仓库改为对应的状态
          this.formLabelAlign.warehouse =
          this.formLabelAlign.warehouse == 1 ? "A仓库" : 
          this.formLabelAlign.warehouse == 2? "B仓库":
          this.formLabelAlign.warehouse == 3? "C仓库":''
          //将成色改为对应的状态
          this.formLabelAlign.condition = this.formLabelAlign.condition == 1 ? "千足金999" :"万足金9999"

        //将状态改变为对应的状态
        this.formLabelAlign.purchaseOrderStatus =
          this.formLabelAlign.purchaseOrderStatus == 0
            ? "已取消"
            : this.formLabelAlign.purchaseOrderStatus == 2
            ? "采购中"
            : this.formLabelAlign.purchaseOrderStatus == 3
            ? "已完成"
            : this.formLabelAlign.purchaseOrderStatus == 1? "编辑":'';
      });
    },
    //分页获取对应商品信息
    getGoods() {
      this.queryPageBean.queryString = this.purchaseOrderId;
      purchaseOrderGoods.findPage(this.queryPageBean).then((res) => {
        this.tableData = res.data.rows;
      });
    },
    // 拆单
    split() {
      // 拆单对象ids
      var splitIds = [];
      for (let i = 0; i < this.selection.length; i++) {
        splitIds.push(this.selection[i].purchaseOrderGoodsId);
      }
     
      //给对象赋值
      this.splitGoodsIds.purchaseOrderId = this.purchaseOrderId;
      this.splitGoodsIds.purchaseOrderGoodsIds = splitIds;

       alert("采购单表=》"+this.splitGoodsIds.purchaseOrderId+",需要拆单的商品ids"+JSON.stringify(splitIds));
      //发送请求之前先判断是否拆最后一个商品
      if (this.tableData.length == 1) {
        this.$confirm("当前采购单对应商品剩余1条,请确认是否拆单", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          //发起请求
          purchaseOrderGoods.spilt(this.splitGoodsIds).then((res) => {
            this.$message({
              message: "拆单成功",
              type: "success",
            });
            //跳转到需求单列表页面
            this.$router.push({ name: "purchase" });
          });
        });
      } else {
        //此时不是最后一条商品
        purchaseOrderGoods.spilt(this.splitGoodsIds).then((res) => {
          this.$message({
            message: "拆单成功",
            type: "success",
          });
          //跳转到需求单列表页面
          this.$router.push({ name: "purchase" });
        });
      }
    },
    handleSelectionChange(val) {
      // alert("选择的id为==========="+val);
      this.selection = val;
    },
    // 每页条数
    handleSizeChange(val) {
      this.queryPageBean.pageSize = val;
      this.getGoods();
    },
    //每页大小
    handleCurrentChange(val) {
      this.queryPageBean.currentPage = val;
      this.getGoods();
    },
    backtrack() {
      this.$router.push({ name: "purchase" });
    },
    //审核
    audit(){
      this.$confirm("确认审核吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        purchaseOrderGoods.xMan(this.purchaseOrderId).then((res) => {
          this.$message({
            message: "审核成功",
            type: "success",
          });
          //跳转到需求单列表页面
          this.$router.push({ name: "purchase" });
        });
      });
    },
    //反审
    unAudit(){
      this.$confirm("确认反审吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          purchaseOrderGoods.unxMan(this.purchaseOrderId).then((res) => {
            this.$message({
              message: "反审成功",
              type: "success",
            });
            //跳转到需求单列表页面
            this.$router.push({ name: "purchase" });
          });
      });
    }
  },
};
</script>

<style scoped>
.but {
  float: right;
}
</style>
